<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont.css" />
    <link rel="stylesheet" href="./reset.css" />
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .icon-xiangyoujiantou {
        font-size: 14px;
        color: #fff;
        cursor: pointer;
      }
      .nav {
        background-color: #7b7b7b;
        height: 100vh;
        padding-top: 20px;
        width: 280px;
      }
      .box {
        display: flex;
        justify-content: space-between;
        padding: 10px 30px;
        align-items: center;
        position: relative;
      }
      .box:hover {
        background-color: #ff6801;
      }
      .box:hover .right-display {
        display: grid;
      }
      .right-display {
        position: absolute;
        left: 100%;
        top: 0;
        height: 550px;
        display: none;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: auto;
        grid-auto-flow: column;
        grid-auto-columns: auto;
        background: white;
        border: 1px #e1e1e1 solid;
        box-shadow: 5px 5px 10px #ccc;
        color: #36303c;
        place-items: center start;
      }
      /* .right-display {
        position: absolute;
        left: 100%;
        top: 0;
        height: 550px;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(2, 305px);
        grid-auto-flow: rows;
        grid-auto-rows: auto;
        background: white;
        border: 1px #e1e1e1 solid;
        box-shadow: 5px 5px 10px #ccc;
        color: #36303c;
        place-items: center start;
      } */
      .left a {
        display: inline-block;
        color: #fff;
        padding-right: 5px;
      }
      .right-item {
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
        height: 50px;
        width: 305px;

        padding: 15px 0;
      }
      .right-item > img {
        height: 38px;
        width: 28px;
        margin: 0 20px 0 20px;
        display: inline-block;
      }
      .right-item > a {
        display: inline-block;
        color: #333;
      }
    </style>
  </head>

  <body>
    <ul class="nav">
      <li class="box">
        <div class="left">
          <a href="#">手机</a>
          <a href="#">电话卡</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
        <div class="right-display">
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD1</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD2</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD3</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD4</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD5</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD6</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD7</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD8</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD9</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD10</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD11</a>
          </div>
        </div>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">笔记本</a>
          <a href="#">显示器</a>
          <a href="#">平板</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
        <div class="right-display">
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD1</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD2</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD3</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD4</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD5</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD6</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD7</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD8</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD9</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD10</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD11</a>
          </div>
        </div>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">手机</a>
          <a href="#">电话卡</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
        <div class="right-display">
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD1</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD2</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD3</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD4</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD5</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD6</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD7</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD8</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD9</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD10</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD11</a>
          </div>
        </div>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">笔记本</a>
          <a href="#">显示器</a>
          <a href="#">平板</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
        <div class="right-display">
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD1</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD2</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD3</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD4</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD5</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD6</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD7</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD8</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD9</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD10</a>
          </div>
          <div class="right-item">
            <img src="./phone.png" alt="" />
            <a href="#">小米 MIX FOLD11</a>
          </div>
        </div>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">手机</a>
          <a href="#">电话卡</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">笔记本</a>
          <a href="#">显示器</a>
          <a href="#">平板</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">手机</a>
          <a href="#">电话卡</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">笔记本</a>
          <a href="#">显示器</a>
          <a href="#">平板</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">手机</a>
          <a href="#">电话卡</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
      <li class="box">
        <div class="left">
          <a href="#">笔记本</a>
          <a href="#">显示器</a>
          <a href="#">平板</a>
        </div>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
    </ul>
  </body>
</html>
